  <template>
  <div class="addAndExitProject">
    <a-modal 
      v-model:open="open"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>

    </template>

      <a-form 
        ref="formRef"
        :rules="rules"
        :model="formState"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :hideRequiredMark="true"
      >
        <a-row>
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item label="项目名称:" name="projectName">
              <a-input
                placeholder="请输入项目名称"
                v-model:value="formState.projectName"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-item label="项目描述:" name="projectDesc">
              <a-input
                placeholder="请输入项目描述"
                v-model:value="formState.projectDesc"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import type { UnwrapRef } from 'vue';
  import { message } from 'ant-design-vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { normalMixStringReg } from '@/utils/validate';
  import { MAddProjectFormState } from '@/utils/interface';
  import { SaveProject } from '@/api/index';
  
  const emit = defineEmits<{
    (event: 'loadProjectListsFun'): void
  }>();

  const labelCol = { style: { width: '70px' } };
  const wrapperCol = { span: 24 };
  const formRef = ref();
  const open = ref<boolean>(false);
  const title = ref<string>('新增项目');
  const numberDisabled = ref<boolean>(false);

  const formState: UnwrapRef<MAddProjectFormState> = reactive({
    id: null,
    projectName: "",
    projectDesc: "",
  });

  const validateProjectName = (_rule: Rule, value: string) => {
    if (value === '' || value === null) {
      return Promise.reject('请输入项目名称');
    } else {
      if (!normalMixStringReg.test(value)) {
        return Promise.reject('请输入合法的项目名称');
      } else {
        return Promise.resolve();
      }
    }
  };
  const rules: Record<string, Rule[]> = {
    projectName: [{ validator: validateProjectName, trigger: 'blur' }]
  };


  const showModal = (record: any) => {
    if(record) {
      formState.id = record.id;
      formState.projectName = record.projectName;
      formState.projectDesc = record.projectDesc;
      title.value = '修改项目';
    } else {
      formState.id = null;
      formState.projectName = "";
      formState.projectDesc = "";
      title.value = '新增项目';
    }
    open.value = true;
  }

  const handleOk = async () => {
    formRef.value
    .validate()
    .then(() => {
      AddAppFun();
    })
    .catch((error: any) => {
      console.log('error', error);
    });
  }

  const AddAppFun = async () => {
    const _params: MAddProjectFormState = {
      projectName: formState.projectName,
      projectDesc: formState.projectDesc,
    };
    if(formState.id) {
      _params.id = formState.id;
    }
    if(formState.projectDesc) {
      _params.projectDesc = formState.projectDesc;
    }
    const res = await SaveProject(_params);
    if(res) {
      if(res.code === 1000) {
        if(title.value === '新增项目') {
          message.success("新增成功");
        } else {
          message.success('修改成功');
        }
        emit("loadProjectListsFun");
        handleCancel();
      } else {
        message.error(res.msg);
      }
    }
  }

  const handleCancel = () => {
    formRef.value.resetFields();
    numberDisabled.value = false;
    formState.id =null;
    formState.projectName = "";
    formState.projectDesc = "";
    open.value = false;
  }
  defineExpose({ showModal });
</script>

<style lang="scss" scoped>
</style>